@import "../base"

$movieBarSize: 650px
.movieBar
  width: 100%
  height: 100%
  display: flex
  align-items: center

  .movie_content
    display: flex
    flex-direction: column
    align-items: center
    width: 70%

    .movie_play
      padding: 10px
      min-width: $movieBarSize
      video
        width: 95%

    .movie_thumbnail
      display: flex
      flex-direction: row
      justify-content: center
      border-radius: 5%
      padding: 10px
      flex-wrap: wrap

      span
        float: left
        height: $movieBarSize*0.3*0.4
        width: $movieBarSize*0.2
        cursor: pointer
        text-align: center
        margin: 2px
        position: relative

        img
          width: $movieBarSize*0.2
          height: $movieBarSize*0.2*0.6

        .highlight_movie_marker
          position: absolute
          top: $movieBarSize*0.2*0.4* 0.5
          left: $movieBarSize*0.2*0.4
          width: $movieBarSize*0.2*0.4 *0.6
          height: $movieBarSize*0.2*0.4 *0.6
          background-image: url("https://store.cloudflare.steamstatic.com/public/images/v5/ico_game_highlight_video.png")

  .movie_img
    width: 25%
    display: flex
    flex-direction: column
    align-items: center

    img
      width: 110%
      border: 5px #252525 solid

    span
      color: #516d70
      font-size: $font_size
